<link rel="stylesheet" href="module/dtree/dtree.css"/>
<link rel="stylesheet" href="module/dtree/font/dtreefont.css"/>
<style>
    /** dtree选中颜色重写 */
    .dtree-theme-item-this {
        background-color: #eeeeee !important;
    }

    #prTree {
        height: 535px;
        overflow: auto;
    }

    @media screen and (max-width: 750px) {
        #prTree {
            height: auto;
        }
    }
</style>

<!-- 关闭Tab时顶部标题 -->
<div class="layui-body-header">
    <span class="layui-body-header-title">项目列表</span>
    <span class="layui-breadcrumb pull-right">
        <a href="#/console/console1">首页</a>
        <a><cite>项目列表</cite></a>
    </span>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 左树 -->
        <div class="layui-col-sm12 layui-col-md4 layui-col-lg3">
            <div class="layui-card">
                <div class="layui-card-body mini-bar" id="prTree">

                </div>
            </div>
        </div>
        <!-- 右表 -->
        <div class="layui-col-sm12 layui-col-md8 layui-col-lg9">
            <div class="layui-card">
                <div class="layui-card-body">


                    <button id="projectRole-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加角色
                    </button>
                    <table class="layui-table" id="projectRoleTable" lay-filter="projectRoleTable"></table>

                </div>
            </div>
        </div>

    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="rtTableBar-look">
    <input name="p_look" type="checkbox" lay-filter="pr-p-tpl-state" value="{{d.p_look}}" lay-skin="switch" lay-text="可|否"
           pr_id="{{d.pr_id}}" {{d.p_look==true?'checked':''}}/>
</script>
<script type="text/html" id="rtTableBar-modify">
    <input name="p_modify" type="checkbox" lay-filter="pr-p-tpl-state" value="{{d.p_modify}}" lay-skin="switch" lay-text="可|否"
           pr_id="{{d.pr_id}}"  {{d.p_modify==true?'checked':''}}/>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="project-role-model">
    <form id="project-role-form" lay-filter="project-role-form" class="layui-form model-form">
        <input name="pro_id" type="hidden"/>
        <input name="pr_id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input name="roleName" placeholder="请输入角色名" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input name="des" placeholder="请输入描述" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">查权限</label>
            <div class="layui-input-block">
                <input name="p_look" type="checkbox" value="1" lay-skin="switch" lay-text="可|否"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">改权限</label>
            <div class="layui-input-block">
                <input name="p_modify" type="checkbox" value="1" lay-skin="switch" lay-text="可|否"/>
            </div>
        </div>
        <div class="layui-form-item model-form-footer">
            <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
            <button class="layui-btn" lay-filter="project-role-form-submit" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="project-role-table-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'config', 'util', 'dtree', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var util = layui.util;
        var dtree = layui.dtree;
        var admin = layui.admin;
        var tableObj = [];
        var apiPre = "api-scriptwriter/api/mind/projectRole/";
        var nowProId = 0;

        admin.req("api-scriptwriter/api/mind/project/" + 'list', {}, function (data) {
            for (var i = 0; i < data.data.length; i++) {
                var temp = {};
                temp.id = data.data[i].pro_id;
                temp.title = data.data[i].title;
                tableObj.push(temp);
            }
            // console.log(applications);

        }, 'GET');


        // 树形渲染
        setTimeout(function () {
            $('#prTree').html('');
            dtree.render({
                elem: '#prTree',
                data: tableObj
            });
        }, 300);

        // 树形点击事件
        dtree.on('node("prTree")', function (obj) {
            var data = obj.param;
            nowProId = data.nodeId;
            var renderTable = function () {
                //获取项目角色列表
                table.render({
                    elem: '#projectRoleTable',
                    where: {
                        access_token: config.getToken().access_token
                    },
                    url: config.base_server + apiPre + 'list?pro_id=' + nowProId,
                    page: false,
                    cols: [[
                        {type: 'numbers'},
                        {field: 'pro_id', sort: true, title: '项目ID'},
                        {field: 'roleName', sort: true, title: '角色名称'},
                        {field: 'des', sort: true, title: '描述'},
                        {align: 'center', toolbar: '#rtTableBar-look', title: '查', minWidth: 80},
                        {align: 'center', toolbar: '#rtTableBar-modify', title: '改', minWidth: 80},
                        {align: 'center', toolbar: '#project-role-table-bar', title: '操作', width: 250}
                    ]]
                });

            };

            renderTable();

            // 修改状态
            form.on('switch(pr-p-tpl-state)', function (obj) {
                layer.load(2);
                var jo = $(obj.elem);
                var p = jo.attr("name");
                var data = {pr_id: jo.attr("pr_id")};
                var check = obj.elem.checked;
                if(p == 'p_look'){
                    data['p_look'] = check;
                }else if(p == 'p_modify'){
                    data['p_modify'] = check;
                }
                admin.req(apiPre + "updateStatus", JSON.stringify(data), function (d) {
                    layer.closeAll('loading');
                    if (d.success) {
                        layer.msg(d.msg,{icon: 6, time: 2000});
                    }else{
                        layer.msg(d.msg,{icon: 2, time: 2000});
                    }
                    table.reload('projectRoleTable');
                }, 'PATCH');

            });
            // 监听工具条
            table.on('tool(projectRoleTable)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'edit') { // 查看
                    showEditModel(data);
                } else if (layEvent === 'del') { // 删除
                    doDelete(data);
                }
            });

            // 删除
            var doDelete = function (obj) {
                layer.confirm('确定要删除吗？', function (i) {
                    layer.close(i);
                    layer.load(2);
                    admin.req(apiPre + 'del/' + obj.pr_id, {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 0) {
                            layer.msg(data.msg, {icon: 1, time: 1000});
                            table.reload('projectRoleTable');
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 3000});
                        }
                    }, 'DELETE');
                });
            };

            // 添加按钮点击事件
            $('#projectRole-btn-add').click(function () {
                showEditModel({pro_id: nowProId});
            });

            // 显示编辑弹窗
            var showEditModel = function (data) {
                layer.open({
                    type: 1,
                    title: data.pr_id ? '修改' : '添加',
                    area: '450px',
                    offset: '120px',
                    content: $('#project-role-model').html(),
                    success: function () {
                        $("#project-role-form")[0].reset();
                        $("#project-role-form").attr('method', 'POST');
                        if (data) {
                            form.val('project-role-form', data);
                        }
                    }
                });
            };

            // 表单提交事件
            form.on('submit(project-role-form-submit)', function (data) {
                layer.load(2);
                var url, method;
                if (data.field.pr_id) {
                    url = apiPre + 'update';
                    method = 'PATCH';
                } else {
                    url = apiPre + 'add';
                    method = 'POST';
                }
                admin.req(url, JSON.stringify(data.field), function (data) {
                    layer.closeAll('loading');
                    console.log(data);
                    if (data.code == 0) {
                        layer.msg(data.msg, {icon: 1, time: 2000});
                        table.reload('projectRoleTable');
                        layer.closeAll('page');
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 5000});
                    }
                }, method);
                return false;
            });

        });

    });
</script>